<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="490px" :title="`${drawerProps.title}老人`">
    <el-form
      ref="ruleFormRef"
      label-width="118px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-card body header="基础信息" never>
        <el-form-item label="老人姓名" prop="name">
          <el-input v-model="drawerProps.row!.name" placeholder="请填写老人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="行动能力" prop="mobilityStatus">
          <el-select v-model="drawerProps.row!.mobilityStatus" placeholder="请选择行动能力" clearable>
            <el-option v-for="item in mobilityStatus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="照护人员" prop="employeeId">
          <el-select v-model="drawerProps.row!.careWorkerEmployeeIds" placeholder="请选择照护人员" multiple clearable>
            <el-option v-for="item in employeeList" :key="item.id + ''" :label="item.name" :value="item.id + ''" />
          </el-select>
        </el-form-item>
        <el-form-item label="老人称呼" prop="nickName">
          <el-input v-model="drawerProps.row!.nickName" placeholder="请填写老人称呼" clearable></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="drawerProps.row!.idCard" placeholder="请填写身份证号" clearable></el-input>
        </el-form-item>
        <el-form-item label="老人生日" prop="dateOfBirth">
          <el-date-picker
            v-model="drawerProps.row!.dateOfBirth"
            type="date"
            placeholder="请选择老人生日"
            clearable
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="drawerProps.row!.gender">
            <el-radio :value="1">男士</el-radio>
            <el-radio :value="2">女士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="老人属相" prop="chineseZodiac">
          <el-select v-model="drawerProps.row!.chineseZodiac" placeholder="请选择老人属相" clearable>
            <el-option v-for="item in chineseZodiac" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="紧急联系人" prop="emergencyContactName">
          <el-input v-model="drawerProps.row!.emergencyContactName" placeholder="请填写紧急联系人" clearable></el-input>
        </el-form-item>
        <el-form-item label="紧急联系电话" prop="emergencyContactPhone">
          <el-input v-model="drawerProps.row!.emergencyContactPhone" placeholder="请填写紧急联系电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人关系" prop="emergencyContactRelation">
          <el-select v-model="drawerProps.row!.emergencyContactRelation" placeholder="请选择紧急联系人关系" clearable>
            <el-option v-for="item in domesticRelation" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="drawerProps.row!.contactPhone" placeholder="请填写联系电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="家庭地址">
          <el-input v-model="drawerProps.row!.address" placeholder="请填写家庭地址" type="textarea" clearable></el-input>
        </el-form-item>
        <el-form-item label="其他备注">
          <el-input v-model="drawerProps.row!.notes" placeholder="请填写其他备注" type="textarea" clearable></el-input>
        </el-form-item>
      </el-card>

      <el-tabs class="elderly-tabs" type="border-card" style="margin-top: 15px">
        <el-tab-pane label="入住信息">
          <el-form-item label="入住状态">
            <el-select v-model="drawerProps.row!.status" placeholder="请选择当前状态" clearable>
              <el-option v-for="item in elderlyStatus" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="入住日期" prop="checkInDate">
            <el-date-picker
              v-model="drawerProps.row!.checkInDate"
              type="date"
              placeholder="请选择入住日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="房间号" prop="roomNumber">
            <el-input v-model="drawerProps.row!.roomNumber" placeholder="请填写房间号" clearable></el-input>
          </el-form-item>
          <el-form-item label="床位号" prop="bedNumber">
            <el-input v-model="drawerProps.row!.bedNumber" placeholder="请填写床位号" clearable></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="头像">
          <UploadImg
            v-model:image-url="drawerProps.row!.avatarUrl"
            width="201px"
            height="201px"
            :file-size="10"
            :file-tag="'老人-头像'"
          >
            <template #empty>
              <el-icon><Avatar /></el-icon>
              <span>请上传头像</span>
            </template>
          </UploadImg>
        </el-tab-pane>
        <el-tab-pane label="生活照">
          <UploadImgs
            v-model:file-list="drawerProps.row!.photoUrls"
            height="140px"
            width="201px"
            :file-tag="'老人-生活照'"
            :file-size="10"
          >
            <template #empty>
              <el-icon><Picture /></el-icon>
              <span>请上传照片</span>
            </template>
          </UploadImgs>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="ElderlyDrawer">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { Elderly, Employee } from "@/api/interface";
import { getEmployeeList } from "@/api/modules/employee";
import UploadImg from "@/components/Upload/Img.vue";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { mobilityStatus, elderlyStatus, domesticRelation, chineseZodiac } from "@/utils/dict";

const rules = reactive({
  name: [{ required: true, message: "请填写老人姓名" }],
  mobilityStatus: [{ required: true, message: "请选择能力等级" }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Elderly.ResElderlyInfoList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  if (drawerProps.value.title === "新增") {
    drawerProps.value.row.status = 1;
    drawerProps.value.row.mobilityStatus = 1;
    drawerProps.value.row.bloodType = 0;
  }
};

// 加载员工列表
onMounted(() => {
  loadEmployeeList();
});

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      drawerProps.value.row.elderlyCareWorkerList =
        drawerProps.value.row.careWorkerEmployeeIds?.map(item => ({
          employeeId: Number(item),
          employeeName: employeeList.value.find(emp => emp.id === Number(item))?.name || ""
        })) || [];

      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({ message: `${drawerProps.value.title}老人成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

// 加载员工列表
const employeeList = ref<Employee.ResEmployeeList[]>([]);
const loadEmployeeList = async () => {
  const res = await getEmployeeList({ pageNum: 1, pageSize: 9999999 });
  employeeList.value = res.data.list || [];
};

defineExpose({
  acceptParams
});
</script>

<style scoped>
.elderly-tabs .el-tab-pane {
  padding-top: 15px;
}
</style>
